<template>
    <div class="main">
        <van-button type="info" plain class="prev btn" @click="to(-1)"
            >上一页</van-button
        >
        <div class="btn number row">
            <span v-if="pageCount !== Infinity">{{ value }}</span>
            <span v-else>{{ value }}/{{ pageCount }}</span>
        </div>

        <van-button type="info" plain class="next btn" @click="to(1)"
            >下一页</van-button
        >
    </div>
</template>

<script>
export default {
    props: {
        value: { type: Number },
        "page-count": {
            type: Number,
            default() {
                return Infinity;
            },
        },
        "show-page-size": { type: Number, default: 5 }, // 最多显示的页码的数目
    },
    components: {},
    mounted() {
        setTimeout(() => {
            console.log(this.pageCount);
        }, 2000);
    },
    methods: {
        to(relative) {
            const newValue = this.value + relative;
            if (newValue >= 1 && newValue <= this.pageCount) {
                this.$emit("input", newValue);
                this.$emit("change", newValue);
                this.$emit(relative > 0 ? "next" : "prev");
            } else {
                this.$emit("edge", this.value);
            }
        },
    },
};
</script>

<style lang="less" scoped>
.main {
    width: 100%;
    display: flex;
    flex-direction: row;
    .btn {
        padding: 20rpx;
        color: #1989fa;
        font-size: 36rpx;
    }
    .number {
        flex: 1;
        text-align: center;
    }
}
</style>